<template>
    <el-container>

        <!--侧边栏-->
        <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529;">

            <div style="height: 60px;  color: white; display: flex; align-items: center; justify-content: center;">
                <img src="@/assets/img_1.png" alt="" style="width: 40px; height: 40px; ">
                <span class="logo-title"  v-show="!isCollapse">仓库总管界面</span>
            </div>

            <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border: none;" default-active="/home">

                <el-menu-item index="">
                    <el-icon><HomeFilled /></el-icon>
                    <span slot="title">首页</span>
                </el-menu-item>

                <el-menu-item @click="inventory">
                    <el-icon><Box /></el-icon>
                    <span slot="title">库存</span>
                </el-menu-item>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><Menu /></el-icon>
                        <span>出入库</span>
                    </template>
<!--                    <el-menu-item index="/superPut">入库</el-menu-item>
                    <el-menu-item index="/out">出库</el-menu-item>-->
                    <el-menu-item index="/superPut">入库</el-menu-item>
                    <el-menu-item index="/superOut">出库</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><Menu /></el-icon>
                        <span>流水</span>
                    </template>
                    <el-menu-item index="/salesin">入库</el-menu-item>
                    <el-menu-item index="/salesout">出库</el-menu-item>
                    <el-menu-item index="/statistics">流水图</el-menu-item>
                </el-sub-menu>

                <el-menu-item index="/LoginApp">
                    <template #title>
                        <el-icon><Grid /></el-icon>
                        <span >用户注册申请</span>
                    </template>
                </el-menu-item>
                <el-menu-item index="/outmap">
                    <template #title>
                        <el-icon><Van /></el-icon>
                        <span >查看具体路线</span>
                    </template>
                </el-menu-item>

            </el-menu>

        </el-aside>

        <el-container>

            <!--头部-->
            <el-header>
                <el-icon @click="handleCollapse" class="actionButton"><Operation /></el-icon>

                <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
                    <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>

                <div class="container">
                    <el-dropdown class="left" style="margin-left: 1100px;margin-top: -28px">
                        <el-avatar> {{role}}</el-avatar>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <div class="right" style="text-align: right;">
                        <span @click.stop="toggleDark()">暗黑模式</span>
                        <el-switch size="small" v-model="isDark"></el-switch>
                    </div>
                </div>

                <!--        <el-icon @click="handleCollapse" class="actionButton"><Operation /></el-icon>-->

                <!--          <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
                            <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>

                          </el-breadcrumb>-->

            </el-header>

            <!--主体-->
            <el-main>
                <RouterView />
            </el-main>

        </el-container>

    </el-container>

</template>

<script  setup>
    import { ref } from 'vue';
    import {logout} from '@/net'
    import router from "@/router";
    import {Menu,HomeFilled,Box,Operation,ArrowRight,Grid,Van} from '@element-plus/icons-vue'
    const isCollapse = ref(false);
    const asideWidth = ref('200px');
    const role=ref(sessionStorage.getItem('role'))
    const handleCollapse = () => {
        isCollapse.value = !isCollapse.value;
        asideWidth.value = isCollapse.value ? '80px' :'200px'
    };
    import { useDark, useToggle } from '@vueuse/core'

    const isDark = useDark()
    const toggleDark = useToggle(isDark)
    const inventory=()=>{
        router.push({
            name:'inventory2'
        })
    }

</script>

<style>
/*
    .container {
        display: flex;  !* 使用 flex 布局 *!
    }

    .left {
        flex: 1;  !* 左侧元素占据剩余空间的比例 *!
    }

    .right {
        flex: 1;  !* 右侧元素占据剩余空间的比例 *!
    }*/


    .el-menu-item.is-active{
        background-color: #1890ff !important;
        border-radius: 4px ;
        margin: 4px;
    }

    .el-menu-item{
        height: 50px;
        line-height: 40px;
    }

    .actionButton{
        height: 40px;
        margin-top:10px;
        font-size: 25px;
    }

    .el-aside{
        transition: width .3s;
    }

    .logo-title{
        margin-left: 5px;
        font-size: 20px;
        transition: width .3s;
    }

    .el-header{
        box-shadow:2px 0 6px rgba(0,21,41,.35)
    }

    .breadcrumb{
        margin-left: 45px;
        margin-top: -30px;
        font-size: 20px;
    }

</style>